[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { YearCard } from "@/components/year-card" export default function Page() { return (

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "年度回顾卡片生成器", description: "创建属于你的年度回顾卡片", generator: "v0.app", icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "html2canvas": "1.4.1", "html-to-image": "1.11.13" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/year-card.tsx" isEdit="true" "use client" import { useState, useEffect, useRef } from "react" import { Pencil, Check, Trash2, Plus, Download } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { toPng } from "html-to-image" interface BubbleItem { id: number text: string } export function YearCard() { const [title, setTitle] = useState("Your year with ChatGPT") const [isEditingTitle, setIsEditingTitle] = useState(false) const [bubbles, setBubbles] = useState([ { id: 1, text: "什么意思" }, { id: 2, text: "帮我翻译这个" }, { id: 3, text: "那这种情况正常吗" }, { id: 4, text: "我只是想确认一下" }, { id: 5, text: "可以再简单一点吗" }, ]) const [editingId, setEditingId] = useState(null) const [editText, setEditText] = useState("") const [gradientAngle, setGradientAngle] = useState(135) const [isPaused, setIsPaused] = useState(false) const cardRef = useRef(null) useEffect(() => { if (isPaused) return const interval = setInterval(() => { setGradientAngle((prev) => (prev + 0.5) % 360) }, 50) return () => clearInterval(interval) }, [isPaused]) const startEdit = (bubble: BubbleItem) => { setEditingId(bubble.id) setEditText(bubble.text) } const saveEdit = () => { if (editingId !== null) { setBubbles(bubbles.map((b) => (b.id === editingId ? { ...b, text: editText } : b))) setEditingId(null) setEditText("") } } const deleteBubble = (id: number) => { setBubbles(bubbles.filter((b) => b.id !== id)) } const addBubble = () => { const newId = Math.max(...bubbles.map((b) => b.id), 0) + 1 setBubbles([...bubbles, { id: newId, text: "新的内容" }]) } const downloadImage = async () => { const card = cardRef.current if (!card) return try { setIsPaused(true) await new Promise((resolve) => setTimeout(resolve, 100)) const dataUrl = await toPng(card, { quality: 1, pixelRatio: 2, cacheBust: true, backgroundColor: "#f5f0ff", filter: (node) => { if (node instanceof Element) { if (node.classList?.contains("opacity-0")) { return false } } return true }, }) const link = document.createElement("a") link.download = "year-with-chatgpt.png" link.href = dataUrl link.click() setIsPaused(false) } catch (error) { console.error("Failed to download image:", error) setIsPaused(false) alert("下载失败，请重试") } } return (

{bubbles.map((bubble) => (

{editingId === bubble.id ? (

setEditText(e.target.value)} className="h-12 bg-white/95 border-0 rounded-full px-6 text-base text-gray-800 min-w-[180px]" autoFocus onKeyDown={(e) => e.key === "Enter" && saveEdit()} />

) : (

{bubble.text}

)}

))}

{isEditingTitle ? (

setTitle(e.target.value)} className="h-10 bg-white/90 border-0 rounded-lg px-4 text-base text-gray-800" autoFocus onKeyDown={(e) => e.key === "Enter" && setIsEditingTitle(false)} onBlur={() => setIsEditingTitle(false)} />

) : ( setIsEditingTitle(true)} > {title} )}

点击气泡或标题即可编辑内容，悬停显示编辑按钮

) }

About

Tags

Share

About

Tags

Share

More from jackywine

More Templates Like This